<template>
  <div class="my">
    <div class="header" v-if="loginUser">
      <div class="header_l">
        <div class="user_pic">
          <img :src="loginUser.avatar" />
        </div>
        <div class="user_info">
          <div class="info_t">
            <span class="nickname">{{ loginUser.nickname }}</span>
            <div class="member" v-if="loginUser.vip">
              <img :src="loginUser.vip_icon" />
              {{ loginUser.vip_name }}
            </div>
          </div>
          <div class="info_b">
            <div class="uid">ID：{{ loginUser.uid }}</div>
          </div>
        </div>
      </div>
      <div class="header_r">
        <div class="setting" @click="$router.push('/my/user')">
          <van-icon name="setting-o" color="#ffffff"></van-icon>
        </div>
      </div>
    </div>
    <div class="content" v-if="loginUser">
      <div class="content_top">
        <div class="item">
          <div class="title">我的余额</div>
          <div class="num">{{ loginUser.now_money }}</div>
        </div>
        <div class="item">
          <div class="title">当前佣金</div>
          <div class="num">{{ loginUser.brokerage_price }}</div>
        </div>
        <div class="item">
          <div class="title">优惠券</div>
          <div class="num">{{ loginUser.couponCount }}</div>
        </div>
      </div>
      <div class="myOrder">
        <div class="title">
          <van-cell
            title="我的订单"
            is-link
            value="全部订单"
            to="/order/list/0"
          />
        </div>
        <div class="nav">
          <van-grid :border="false" :column-num="5" clickable>
            <van-grid-item
              icon="pending-payment"
              text="待付款"
              :badge="
                loginUser.orderStatusNum.unpaid_count
                  ? loginUser.orderStatusNum.unpaid_count
                  : ''
              "
              to="/order/list/0"
            />
            <van-grid-item
              icon="todo-list-o"
              text="待发货"
              :badge="
                loginUser.orderStatusNum.unshipped_count
                  ? loginUser.orderStatusNum.unshipped_count
                  : ''
              "
              to="/order/list/1"
            />
            <van-grid-item
              icon="sign"
              text="待收货"
              :badge="
                loginUser.orderStatusNum.received_count
                  ? loginUser.orderStatusNum.received_count
                  : ''
              "
              to="/order/list/2"
            />
            <van-grid-item
              icon="comment-o"
              text="待评价"
              :badge="
                loginUser.orderStatusNum.evaluated_count
                  ? loginUser.orderStatusNum.evaluated_count
                  : ''
              "
              to="/order/list/3"
            />
            <van-grid-item
              icon="refund-o"
              text="售后/退款"
              :badge="
                loginUser.orderStatusNum.refund_count
                  ? loginUser.orderStatusNum.refund_count
                  : ''
              "
              to="/order/list/5"
            />
          </van-grid>
        </div>
      </div>
      <div class="myService">
        <div class="title">
          <van-cell title="我的服务" />
        </div>
        <div class="nav">
          <van-grid :border="false" :column-num="4" clickable>
            <van-grid-item
              icon="vip-card-o"
              text="会员中心"
              @click="$toast('功能维护中')"
            />
            <van-grid-item
              icon="cash-back-record"
              text="砍价记录"
              @click="$toast('功能维护中')"
            />
            <van-grid-item
              icon="friends-o"
              text="我的推广"
              @click="$toast('功能维护中')"
            />
            <van-grid-item
              icon="balance-o"
              text="我的余额"
              @click="$toast('功能维护中')"
            />
            <van-grid-item
              icon="logistics"
              text="地址信息"
              to="/address/list"
            />
            <van-grid-item
              icon="goods-collect-o"
              text="我的收藏"
              to="/collect/list"
            />
            <van-grid-item
              icon="coupon-o"
              text="优惠券"
              @click="$toast('功能维护中')"
            />
            <van-grid-item
              icon="service-o"
              text="联系客服"
              @click="$toast('功能维护中')"
            />
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "My",
  computed: {
    ...mapGetters(["loginUser"]),
  },
  activated() {
    this.getUserInfo();
  },
  methods: {
    ...mapMutations(["changeLoading"]),
    getUserInfo() {
      this.changeLoading(true);
      this.$axios.get("api/user").then((d) => {
        this.changeLoading(false);
        console.log("user", d.data);
        if (d.data.status == 200) {
          this.$store.commit("saveLoginInfo", d.data.data);
        } else if (d.data.status == 410000) {
          this.$toast.fail("请重新登录");
          this.$store.commit("loginOut");
          this.$router.push("/login");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.test {
  word-break: break-all;
}
</style>

<style lang="less" scoped>
.my {
  .header {
    height: 60px;
    padding: 25px 15px;
    display: flex;
    background: #1ea8a3;
    position: relative;
    &::after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1rem;
      z-index: -1;
      height: 1rem;
      width: 100%;
      border-radius: 0 0 50% 50%;
      background: inherit;
    }
    .header_l {
      flex: 1;
      width: 0;
      display: flex;
      align-items: center;
      .user_pic {
        flex-shrink: 0;
        width: 60px;
        height: 60px;
        border: 1.5px solid #fff;
        box-sizing: border-box;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          background: #fff;
        }
      }
      .user_info {
        flex: 1;
        width: 0;
        margin-left: 15px;
        .info_t {
          color: #fff;
          line-height: 18px;
          display: flex;
          align-items: center;
          .nickname {
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .member {
            display: flex;
            align-items: center;
            font-size: 12px;
            background: rgba(0, 0, 0, 0.2);
            height: 18px;
            border-radius: 9px;
            padding: 0 6px;
            margin-left: 10px;
            img {
              width: 14px;
              height: 14px;
              margin-right: 4px;
            }
          }
        }
        .info_b {
          font-size: 13px;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
    .header_r {
      .setting {
        line-height: 18px;
        .van-icon {
          font-size: 18px;
        }
      }
    }
  }
  .content {
    padding: 0 10px;
    & > div {
      background: #fff;
      overflow: hidden;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      & > .title {
        position: relative;
        &::after {
          position: absolute;
          content: "";
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1px;
          background-color: #f2f3f5;
          transform: scaleY(0.5);
        }
      }
      &:not(:first-of-type) {
        margin-top: 10px;
      }
    }
    .content_top {
      height: 70px;
      display: flex;
      align-items: center;
      .item {
        flex: 1;
        text-align: center;
        position: relative;
        &:not(:last-of-type)::after {
          position: absolute;
          content: "";
          right: 0;
          width: 1px;
          height: 90%;
          background-color: #ccc;
          top: 50%;
          transform: translateY(-50%) scaleX(0.5);
        }
        .title {
          color: #aaa;
          font-size: 13px;
          line-height: 17px;
        }
        .num {
          font-size: 18px;
          margin-top: 5px;
          line-height: 21px;
        }
      }
    }
    .myOrder {
      .title {
        .van-cell {
          .van-cell__value {
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>